<template>
  <!-- 搜索出来的coffee -->
  <div class="coffee">
    <!-- 图片 -->
    <div class="my-img">
      <img class="auto-img" :src="imgUrl" alt="">
    </div>
    <!-- 我的详情盒子 -->
    <div class="my-box">
        <div class="my-pro" v-for="(item,index) in data"
        :key="index">
            <div class="product" @click="viewDetail(item.pid)">
                <div class="product-img">
                <img class="auto-img" :src="item.smallImg" />
                </div>
                <div class="product-zh one-text">{{item.name}}</div>
                <div class="product-en one-text">{{item.enname}}</div>
                <div class="slot">
                    <div class="product-price">&yen;{{item.price}}</div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Coffee",
  props: {
    data:{
      type:Array
    }
  },
  data() {
    return {
        imgUrl:require('../assets/images/orderbg.png'),

    }
  },
  methods: {
    // 查看商品详情
    viewDetail(pid) {
        this.$router.push({name:'Detail',   params:{pid}
        })
    },
  }  
  
  
}
</script>

<style lang='less' scoped>
@import url('../assets/base.less');

.coffee {
  position: fixed;
  top: 54px;
  left: 0;
  right: 0;
  bottom: 50px;
  background-color: #f7f7f7;
}
.my-img {
  width: 100%;
  height: 100px;
  background-color: @bg_Color;
}
.my-box {
  margin: 0 10px;
  padding: 10px;
  background-color: #fff;
  position: relative;
  top: -20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  flex-wrap:wrap;
}
.my-pro {
    width:calc(~"33.3333% - 10px");
    margin-right: 10px;
    margin-bottom: 10px;
    &:nth-child(3n){
        margin-right: 0;
    }
}
.product-img {
    background-color: #eee;
    border-radius: 10px;
    overflow: hidden;
}
.product-zh {
    font-size:14px;
    margin-top: 10px;
}
.product-en {
    color:#666;
    margin: 5px 0;
}
.product-price {
    font-weight:bold;
    color:@priceColor;
}
.slot {
    // display: flex;
    // justify-content: space-between;
    font-size: 16px;
    color:#999;

}
</style>